<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="./libs/css/bootstrap.min.css">
    <title>bootstrap知识库</title>
    <style>
        .a{width: 100px;height: 80px;background-color: #999;}
    </style>
</head>
<body>
    <!-- 1、表格 -->
    <div class="container">
        <!-- table-striped斑马线效果  table-bordered 为表格和其中的每个单元格增加边框-->
        <table class="table table-striped table-bordered table-hover">  
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>34</td>
                    <td>男</td>
                </tr>
                <tr class="active">
                    <td>2</td>
                    <td>李四</td>
                    <td>24</td>
                    <td>男</td>
                </tr>
                <tr class="success">
                    <td>3</td>
                    <td>莉莉</td>
                    <td>14</td>
                    <td>女</td>
                </tr>
            </tbody>
        </table>
    </div>
<!-- /**
Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作
*/
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
如：
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

-->

    <!--2、 按钮 -->
    <!-- 为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 -->
    <!-- 预设样式：
        btn btn-default
        btn btn-pramiry 
        btn btn-success
        btn btn-info
        btn btn-warning
        btn btn-danger
    按钮尺寸：
        btn-lg，btn-sm, btn-xs
    按钮的激活：
        active类
    按钮的禁用：
        disabled 属性
    
    -->

        <a class="btn btn-default" href="#" role="button">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">


        <!--3、 图片、图片形状 -->
        <img src="./libs/imger/yiluxiangxi.jpg" class="img-responsive center-block" alt="">
        <!-- img-responsive 类可以让图片支持响应式布局 -->
        <!-- 如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类 -->
        <img src="./libs/imger/yiluxiangxi.jpg" class="img-rounded" alt="">
        <img src="./libs/imger/yiluxiangxi.jpg" class="img-circle" alt="">
        <img src="./libs/imger/yiluxiangxi.jpg" class="img-thumbnail" alt="">

        <!-- img-rounded圆角，img-circle原型或椭圆，img-thumbnail相框效果 -->


    <!-- 4、文本颜色/文本对齐 -->
        <div class="container">
            <p class="text-muted">Nullam id dolor id nibh ultricies vehicula ut id elit</p>
            <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit</p>
            <p class="text-success">Nullam id dolor id nibh ultricies vehicula ut id elit</p>
            <p class="text-info">Nullam id dolor id nibh ultricies vehicula ut id elit</p>
            <p class="text-warning">Nullam id dolor id nibh ultricies vehicula ut id elit</p>
            <p class="text-danger">Nullam id dolor id nibh ultricies vehicula ut id elit</p>

            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
            <p class="text-justify">Justified text.</p>
            <p class="text-nowrap">No wrap text.</p>
        </div>
    
    <!-- 5、背景颜色 -->
        <div class="container">
            <p class="bg-primary text-center">you love me?</p>
            <p class="bg-success">you love me?</p>
            <p class="bg-info">you love me?</p>
            <p class="bg-warning">you love me?</p>
            <p class="bg-danger">you love me?</p>
        </div>
 
        <div class="clearfix"></div>
    <!-- 6、关闭按钮 -->
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

    <!--7、 三角符号 -->
        <button class="btn btn-default">课程分类<span class="caret"></span></button>
        <!-- 下拉菜单组件 -->
        <div class="dropdown">
            <button class="btn btn-defualt" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">首页</a></li>
                <li><a href="#">咨询</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>

    <!-- 8、左右浮动 -->
        <div class="container">
            <div class="pull-left a">左浮动</div>
            <div class="clearfix"></div>
            <div class="center-block a">内容块居中</div>
            <div class="clearfix"></div>
            <div class="pull-right a">右浮动</div>
        </div>
        <!-- 不能用于导航条组件中
        排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。 -->

    <!-- 9、显示和隐藏  -->
        <!-- 超小屏幕
        手机 (<768px)
        小屏幕
        平板 (≥768px)
        中等屏幕
        桌面 (≥992px)
        大屏幕
        桌面 (≥1200px)
        .visible-xs-*	可见	隐藏	隐藏	隐藏
        .visible-sm-*	隐藏	可见	隐藏	隐藏
        .visible-md-*	隐藏	隐藏	可见	隐藏
        .visible-lg-*	隐藏	隐藏	隐藏	可见
        .hidden-xs	隐藏	可见	可见	可见
        .hidden-sm	可见	隐藏	可见	可见
        .hidden-md	可见	可见	隐藏	可见
        .hidden-lg	可见	可见	可见	隐藏
        显示状态组有三个： -block，-inline，-inline-block
    -->

    <!-- 10、布局容器 -->
        <!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
        <div class="container">
            you love me!!
        </div>
        <!-- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 -->
        <div class="container-fluid">
            you love me!!
        </div>

    <!-- 11、栅格栏布局 -->
    
        <!-- 超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
        栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
        .container 最大宽度	None （自动）	750px	970px	1170px
        类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
             -->
             <div class="row">
                <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
                <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
              </div>
              <!-- .col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度 -->
              <!-- 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。 -->

    <!-- 12、列表样式 -->
        <hr>
        <ul class="list-unstyled">
            <li>home</li>
            <li>about</li>
            <li>detail</li>
            <li>telphone</li>
        </ul>
        <hr>
        <ul class="list-inline">
            <li>home</li>
            <li>about</li>
            <li>detail</li>
            <li>telphone</li>
        </ul>
        <hr>
    <!-- 13、表单 -->
        <!-- 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平
        并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。 -->
            <div class="container">
                <form class="form-horizontal">

                    <div class="form-group">
                      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                      <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                      <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                      </div>
                    </div>

                    <div class="form-group">
                        <label  class="col-sm-2 control-label">个人简介</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                      </div>

                    <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                          <label>
                            <input type="checkbox"> Remember me
                          </label>
                        </div>
                      </div>
                    </div>

                    <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Sign in</button>
                      </div>
                    </div>
                  </form>
            </div>

    <hr>
    <!-- 组件： -->

        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" >
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            </ul>
        </div>

        <!-- 按钮组 -->
        <hr>
        <div class="btn-group">
            <button type="button" class="btn btn-defualt">上一页</button>
            <button type="button" class="btn btn-defualt">1</button>
            <button type="button" class="btn btn-defualt">2</button>
            <button type="button" class="btn btn-defualt">3</button>
            <button type="button" class="btn btn-defualt">...</button>
            <button type="button" class="btn btn-defualt">下一页</button>
        </div>

        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            课程 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">java</a></li>
                <li><a href="#">bootstrap</a></li>
                <li><a href="#">css</a></li>
                <li  class="divider"></li>
                <li><a href="#">vue</a></li>
            </ul>
        </div>

        <!-- 导航 -->
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">科技</a></li>
              </ul>
        </div>
        <hr>
        <div class="container">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">科技</a></li>
              </ul>
        </div>
        <hr>
        <div class="container">
            <ul class="nav nav-pills nav-stacked col-md-2">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">科技</a></li>
              </ul>
        </div>

        <hr>
        <div class="container">
            <ul class="nav nav-pills nav-justified">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">娱乐</a></li>
                <li class="dropdown">
                    <a href="#"class="dropdown-toggle" data-toggle="dropdown" >
                        产品
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">java</a></li>
                        <li><a href="#">bootstrap</a></li>
                        <li><a href="#">css</a></li>
                        <li  class="divider"></li>
                        <li><a href="#">vue</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <hr>

        <!-- 导航 -->
        <nav class="navbar navbar-inverse navbar-fixed-top"> 
            <!-- navbar-static-top随高度滚动 -->
            <div class="container">
                <a href="#" class="navbar-brand">品牌logo</a>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">视频</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">下载</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
                <form action="#" class="navbar-form">
                    <input type="text" placeholder="搜索" class="form-control">
                    <button type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </form>
            </div>
        </nav>

        <!-- 分页 -->
        <nav aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>

        
    
</body>
<script src="./libs/js/jquery.js"></script>
<script src="./libs/js/bootstrap.min.js"></script>
</html>